import React from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router, Route, NavLink } from "react-router-dom";
import { routeList } from "./config";

import All from "lib/All/all";
import { Layout, Header, SideBar, Content } from "lib/Layout/layout";
import { Button } from "lib";
import Scroll from "lib/Scroll/scroll";
import "./view.scss";
// @ts-ignore
import logo from "./logo.png";

const isTouchDevice = "ontouchstart" in document.documentElement;
console.log(isTouchDevice, "isTouchDevice");

ReactDOM.render(
  <Router>
    <Layout className="pageWrapper">
      <Header className="g-header">
        <h2 className="title">
          <svg className="icon">
            <use xlinkHref="#icon-yun"></use>
          </svg>
          <span>Y</span>un-ui React
        </h2>
        <div className="g-header-right">
          <Button
            className="link"
            level="link"
            href="https://gitee.com/z1725163126/yun-ui-for-react"
          >
            GitHub
          </Button>
        </div>
      </Header>
      <Layout>
        <SideBar className="g-aside">
          <h2>组件</h2>
          <ul>
            {routeList.map((item, index) => {
              return (
                <li key={String(index)}>
                  <NavLink to={item.path}>{item.title}</NavLink>
                </li>
              );
            })}
          </ul>
        </SideBar>
        <Scroll style={{ height: "calc(100vh)", width: "100%" }}>
          <Content className="g-main">
            <Route path="/" component={All} exact />
            {routeList.map((item, index) => {
              return (
                <Route
                  key={index}
                  path={item.path}
                  component={item.component}
                  exact
                ></Route>
              );
            })}
          </Content>
        </Scroll>
      </Layout>
      {/* <Footer className="g-footer">&copy; 云牧</Footer> */}
    </Layout>
  </Router>,
  document.querySelector("#root")
);
